<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>个人中心</title>
   <link rel="stylesheet" href="css/public_left.css">
   <link rel="stylesheet" href="css/center_index.css">
   <link rel="stylesheet" href="css/public.css">
   <link rel="stylesheet" href="css/cuscenter.css">
   <!-- 引入样式 -->
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <script src="js/jquery.min.js"></script>
   <script src="js/jquery.cookie.js"></script>

   <style>
      * {
         margin: 0;
         padding: 0;
      }

      .margin-top {
         margin-top: 10px;
      }

      .margin-top2 {
         margin-top: 16px;
      }

      .margin-left {
         margin-left: 10%;
      }

      .margin-left2 {
         margin-left: 50px;
      }

      .margin-left1 {
         margin-left: 20px;
      }

      .margin-left_logo {
         margin-left: 10%;
      }

      .margin-left_select {
         margin-left: 7px;
      }

      /*导航*/
      header {
         background-color: #2dbb55;
         color: white;
         margin: 0 auto;
         vertical-align: middle;
         min-width: 1400px;
      }

      header a {
         margin-right: 10px;
      }


      /*先找到header，再找到logo*/
      header a .logo {
         width: 140px;
         height: 40px;
         line-height: 40px;
         text-align: center;
         margin-top: 4px;
      }


      /*导航字体*/
      .header_font {
         font-size: 16px;
         font-family: initial;
      }

      /*后代选择器*/
      #navitems ul {
         /* 去除小黑点 */
         list-style: none;
         display: flex;
      }

      #navitems ul li {
         width: 80px;
         height: 44px;
         line-height: 50px;
         text-align: center;
      }

      #navitems ul li a {
         display: block;
         /*区块化*/
         color: white;
         text-decoration: none;
      }

      #navitems ul li:nth-child(2):after {
         display: block;
         width: 16px;
         height: 16px;
         content: "hot";
         color: white;
         background-color: red;
         position: relative;
         left: 50px;
         top: -46px;
         font-size: 10px;
         line-height: 16px;
         text-align: center;
         border-radius: 5px;
      }

      #navitems ul li:nth-last-child(4):after {
         display: block;
         width: 16px;
         height: 16px;
         content: "hot";
         color: white;
         background-color: red;
         position: relative;
         left: 46px;
         top: -46px;
         font-size: 10px;
         line-height: 16px;
         text-align: center;
         border-radius: 5px;
      }

      #navitems ul li a:hover {
         font-weight: bold;
         background-color: rgb(80, 251, 137);
         color: white;
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
      }

      /*第一个子元素*/
      #navitems ul li:first-child {
         /* background-color: aquamarine; */
      }

      /*最后一个子元素*/
      #navitems ul li:last-child {
         /* background-color: rgb(71, 223, 94); */
      }

      /*第n个子元素*/
      #navitems ul li:nth-child(2) {
         /*从1开始*/
         /* background-color: rgb(160, 115, 237); */
      }

      /*倒数第n个元素*/
      #navitems ul li:nth-last-child(2) {
         /*倒数第2个*/
         /* background-color: bisque; */
      }

      /*直接第一层子元素*/
      .par>span {
         /* color: darkorange; */
      }

      /*下一个兄弟元素*/
      .s1 span+label+label {
         /* font-size: 30px; */
      }

      /*属性选择器*/
      input[type="password"] {
         /* color: green; */
      }

      /*伪类*/
      a {
         color: black;
         text-decoration: none;
      }

      a:hover {
         /*鼠标悬浮*/
         font-weight: bold;
         /*加粗*/
         text-decoration: none;
         color: #000;
      }

      /*被点击后的样式*/
      a:visited {
         /* color: yellow; */
      }

      /*伪元素*/
      .hot_pro {
         display: block;
         width: 60px;
         height: 40px;
         text-decoration: none;
         line-height: 40px;
         text-align: center;
         font-size: 14px;
         color: white;
         background-color: rgb(235, 177, 97);
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
      }

      .hot_pro::after {
         display: block;
         content: "hot";
         width: 16px;
         height: 16px;
         color: white;
         background-color: red;
         position: relative;
         /*相对定位*/
         left: 48px;
         top: -48px;
         font-size: 10px;
         line-height: 16px;
         text-align: center;
         border-radius: 5px;
      }
   </style>
</head>

<body>
   <div id="app">

      <header class="flex header_font" style="width: 100%;">
         <div class="margin-left_logo">
            <a href="" style=" margin-right: 40px;">
               <img src="//img3.tuniucdn.com/u/mainpic/logo/logo_20170124.png" title="途牛网" class="logo">
            </a>
         </div>

         <!--菜单模块-->
         <div id="navitems">
            <ul id="navitems_groups">
               <li><a href="javascript:void(0)" @click="skipToIndex">首页</a></li>
               <li><a href="javascript:void(0)">跟团游</a></li>
               <li><a href="javascript:void(0)">自行游</a></li>
               <li><a href="javascript:void(0)">酒+景</a></li>
               <li><a href="javascript:void(0)">酒店</a></li>
               <li><a href="javascript:void(0)">门票</a></li>
               <li><a href="javascript:void(0)">定制游</a></li>
               <li><a href="javascript:void(0)">攻略</a></li>
               <li><a href="javascript:void(0)" @click="skipToCustomerServer">客服</a></li>
               <li><a href="javascript:void(0)">个人中心</a></li>
            </ul>
         </div>

         <!--登录注册-->
         <div class="flex">
            <div class="flex" v-if="isLogin" style="margin-top: 12px;">
               <i class="el-icon-user-solid" style="margin-top: 2px;"></i>
               <div>{{admin.userNickName}}</div>
               <div style="margin-left: 20px;" @click="signOut">
                  <a href="javascript:void(0)" style="color: white;">退出登录</a>
               </div>
            </div>
            <div v-if="!isLogin" class="flex" style="margin-top: 12px;">
               <div class="margin-left" style="width: 60px;">
                  <a href="../../html/admin/admin.html" class="header_font" style="color: white;">
                     登录
                  </a>
               </div>
               <div class="margin-left" style="width: 60px;">
                  <a href="../../html/register/register.html" style="color: white;">
                     注册
                  </a>
               </div>
            </div>
         </div>
      </header>

      <div class="container zhuye">
         <!-- 左侧 -->
         <div class="left-container">
            <ul>
               <li class="center">
                  <span>个人中心</span>
               </li>
               <li class="message">
                  <span>修改个人信息</span>
               </li>
               <li class="vip-title">
                  <span>会员信息</span>
                  <!-- <span class="nav-arrow arrow-down"></span> -->
               </li>
               <li class="order">
                  <span>我的订单</span>
               </li>
               <li class="collection">
                  <span>我的收藏</span>
               </li>
               <li class="discount">
                  <span>我的优惠券</span>
               </li>
            </ul>
         </div>
         <!-- ==============右侧-主页面=================== -->
         <div class="right-container zhuye" style="display: block;">
            <!-- 头部 -->
            <div class="main-head">
               <img src="img/bell.png" id="bell">
               <!-- 头部左侧 -->
               <div class="head-left">
                  <a href="javascript:void(0)">
<<<<<<< HEAD
                     <img :src="admin.standby02" alt="img/thumb.png" class="touxiang">
=======
                     <img src="img/thumb.png" class="touxiang" v-if="admin.standby02==undefined">
                     <img :src="admin.standby02" class="touxiang" v-if="admin.standby02!=undefined">
>>>>>>> 5a2f586ef87e96ef172ef585c6c2b00590ce8750
                  </a>
                  <div class="user-msg">
                     <p id="user-name">
                        <a href="javascript:void(0)">{{admin.userNickName}}</a>
                     </p>
                     <!-- <a href="javascript:void(0)">经验条</a> -->
                  </div>
                  <div class="vip">
                     <a href="javascript:void(0)">
                        <img src="img/diamond.png">
                     </a>
                     <p>会员权益</p>
                  </div>
               </div>
               <!-- 头部右侧优惠券 -->
               <div class="head-right">
                  <a href="javascript:void(0)" class="youhuiquan">
                     <span>折扣券:</span>
                     <b>{{discountCount}}</b>
                     <span>张</span>
                  </a>
                  <a href="javascript:void(0)" class="diyongquan">
                     <span>满减券:</span>
                     <b>{{manjianCount}}</b>
                     <span>张</span>
                  </a>
               </div>
            </div>

            <div class="main-body">
               <!-- 订单 -->
               <div class="my-order">
                  <div class="order-head">
                     <span>我的订单</span>
                     <a href="javascript:void(0)" class="quanbuorder">查看全部订单</a>
                  </div>
                  <!-- 有订单 -->
                  <div class="order-list">
                     <ul class="list-content">
                        <li v-for="(order,index) in orderArr.slice(0, 3)">
                           <div class="item-desc">
                              <img src="img/orderlogo.png">
                              <div>
                                 <p class="main-title">{{order.hotelName}}</p>
                                 <p class="sub-title">{{order.roomType}}</p>
                              </div>
                           </div>

                           <div class="item-price">￥<label>{{order.orderPrice}}</label></div>
                           <div class="item-statue">
                              <p v-if="order.orderStatus == 0">已取消</p>
                              <p v-if="order.orderStatus == 1">待付款</p>
                              <p v-if="order.orderStatus == 2">待使用</p>
                              <p v-if="order.orderStatus == 3">待评价</p>
                              <p>
                                 <a href="javascript:void(0)" @click="goToDetail(order.orderNo)"
                                    class="statue-link">订单详情</a>
                              </p>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <!-- 没订单 -->
                  <div class="no-order" v-if="orderArr.length==0">
                     <img src="img/null.png">
                     <p>没有查到订单,去
                        <a href="">首页</a>
                        逛逛
                     </p>
                  </div>

                  <div class="gap"></div>
                  <!-- 猜你喜欢 -->
                  <div class="guess">
                     <span>猜你喜欢</span>
                     <ul class="recommend-list">
                        <li v-for="recommend in recommendList">
                           <div class="recommend-hotel" @click="goToHotelDetail(recommend.hotelId)">
                              <img :src="recommend.hotelShowImg">
                              <div>
                                 <span class="recommend-name">{{recommend.hotelName}}</span>
                                 <span class="recommend-price">￥<span>{{recommend.roomLeastPrice}}</span>起</span>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
               </div>

               <!-- 收藏 -->
               <div class="my-collection">
                  <span>我的收藏</span>
                  <div class="collection-list">
                     <ul class="list-content">
                        <li v-for="(collection,index) in collectionArr.slice(0, 2)">
                           <div class="item-desc">
                              <img src="img/orderlogo.png" class="shouchang-icon">
                              <div>
                                 <p class="main-title">{{collection.hotelName}}</p>
                                 <p class="sub-title">{{collection.starRanting}}星级</p>
                              </div>
                           </div>
                        </li>
                  </div>
                  <!-- 没有收藏 -->
                  <div class="no-col" v-if="collectionArr.length==0">
                     <img src="img/null.png">
                     <p>您还没有收藏任何产品哦~
                     </p>
                  </div>
               </div>
            </div>
         </div>

         <!-- ============右侧 个人信息 -->
         <div class="right-container gerenxinxi" style="display: none;">
            <form>
               <div class="info-title">
                  <a v-if="flag" href="javascript:void(0)" class="title basic-info" @click="selectBtn">基本信息</a>
                  <a v-else="flag" href="javascript:void(0)" class="title pwd-info" @click="selectBtn">基本信息</a>
                  <a v-if="flag" href="javascript:void(0)" class="title pwd-info" @click="selectBtn">密码设置</a>
                  <a v-else="flag" href="javascript:void(0)" class="title basic-info" @click="selectBtn">密码设置</a>
               </div>

               <!--消息框-->
               <div class="msg">
                  <el-alert v-if="showTrueMsg" title="操作成功！" type="success" center show-icon
                     style="margin-bottom:-40px;margin-top:-40px " @close="close">
                  </el-alert>
                  <el-alert v-if="showErrMsg" title="" type="warning" center show-icon
                     style="margin-bottom:-40px;margin-top:-40px " @close="close">
                     <template slot="title">
                        <div>{{msg}}</div>
                     </template>
                  </el-alert>
                  <!-- <div v-if="!showTrueMsg && !showErrMsg" class="margin_top"></div> -->
               </div>

               <!--基本信息-->
               <div v-if="flag" class="maindiv hide">
                  <ul>
                     <li class="formItem">
                        <label class="must_write">昵称:</label>
                        <el-input placeholder="请输入昵称" v-model="nickname" clearable class="textinput">
                        </el-input>
                        <span class="msgTip usernameTip"></span>
                     </li>

                     <li>
                        <span class="nameTip">昵称要求为4-16个字符，支持中文、英文、数字、“_”、“-”</span>
                     </li>

                     <li class="formItem">
                        <label class="must_write">手机号:</label>
                        <el-input placeholder="请输入手机号码" v-model="phone" clearable class="textinput">
                        </el-input>
                        <span class="msgTip usertelTip"></span>
                     </li>

                     <li class="formItem">
                        <label>生日:</label>
                        <el-date-picker v-model="birthday" type="date" placeholder="选择出生日期">
                        </el-date-picker>
                     </li>

                     <li class="formItem flex">
                        <label class="must_write">性别:</label>
                        <div class="sex">
                           <el-radio v-model="sex" label="m" style="margin-left: -40px;">男</el-radio>
                           <el-radio v-model="sex" label="w" style="margin-left: -60px;">女</el-radio>
                        </div>
                     </li>

                     <li class="formItem">
                        <label>邮箱:</label>
                        <el-input placeholder="请输入邮箱" v-model="email" clearable class="textinput">
                        </el-input>
                        <!-- <span class="msgTip useremailTip"></span> -->
                     </li>

                     <li class="formItem">
                        <label class="must_write">地址:</label>
                        <el-input placeholder="请输入地址" v-model="address" clearable class="textinput">
                        </el-input>
                     </li>

                     <li class="formItem">
                        <label>婚姻:</label>
                        <el-select v-model="ismarraied" clearable placeholder="请选择">
                           <el-option v-for="item in marry" :key="item.id" :label="item.ismarraied" :value="item.id">
                           </el-option>
                        </el-select>
                     </li>

                     <li class="formItem">
                        <label class="must_write">职业:</label>
                        <el-select v-model="work" clearable placeholder="请选择">
                           <el-option v-for="item in workArr" :key="item.id" :label="item.work" :value="item.id">
                           </el-option>
                        </el-select>
                     </li>

                     <li class="formItem">
                        <label>学历:</label>
                        <el-select v-model="educate" clearable placeholder="请选择">
                           <el-option v-for="item in educateArr" :key="item.id" :label="item.educate" :value="item.id">
                           </el-option>
                        </el-select>
                     </li>

                     <li class="formItem">
                        <el-button type="warning" class="submitBtn" @click="submitBtn">保存</el-button>
                        <el-button type="info" class="submitBtn" @click="cancelBtn">取消</el-button>
                     </li>
                  </ul>
               </div>

               <!-- 密码设置 -->
               <div v-else="flag" class="maindiv hide">
                  <ul>
                     <li class="formItem">
                        <label class="must_write">原密码:</label>
                        <el-input placeholder="请输入地址" v-model="lastpwd" clearable class="textinput">
                        </el-input>
                     </li>
                     <li class="formItem">
                        <label class="must_write">新密码:</label>
                        <el-input placeholder="请输入地址" v-model="password" clearable class="textinput">
                        </el-input>
                     </li>
                     <li class="formItem">
                        <label class="must_write">确认密码:</label>
                        <el-input placeholder="请输入地址" v-model="confirmPwd" clearable class="textinput">
                        </el-input>
                     </li>
                     <li class="formItem">
                        <el-button type="warning" class="submitBtn" @click="submitPwd">保存</el-button>
                        <el-button type="info" class="submitBtn" @click="cancelPwd">取消</el-button>
                     </li>
                  </ul>
               </div>

            </form>
         </div>

         <!-- =============右侧 会员================ -->
         <div class="right-container vip_center" style="display: none;">
            <div class="vip-head">
               <span>我的成长信息</span>
               <div class="vip-msg">
                  <div class="mc_bi">
                     <div class="mc_bi_up">
                        <div class="mc_bi_avatar">
                           <img src="img/thumb.png" alt="" />
                        </div>
                        <span class="mc_bi_name">1136902747</span>
                     </div>

                     <div class="mc_bi_down">
                        <p>会员等级：<span class="mc_green">注册会员</span></p>
                        <p>等级有效期至：<span class="mc_white">2999-12-31</span></p>
                        <p>我的成长值：<span class="mc_white">0</span></p>
                        <p class="mc_bi_down_desc"><span class="mc_yellow">+1</span>成长值即可尊享一星会员特权了哦~</p>
                     </div>
                  </div>

                  <div class="level">
                     <span>我的会员等级:</span>
                     <div class="level_process">
                        <!-- <img src="img/level.png" alt=""> -->
                     </div>
                  </div>
               </div>
            </div>

            <!-- 会员特权-->
            <div class="gap"></div>
            <div class="vip-desc">
               <h2>会员特权</h2>
               <div class="dengjiquanyi">
                  <span class="typespan">等级权益</span>
                  <div class="biaoge1">
                     <table>
                        <tbody>
                           <tr>
                              <th class="modu_level_tit">权益\等级</th>
                              <th>注册会员</th>
                              <th>一星会员</th>
                              <th>二星会员</th>
                              <th>三星会员</th>
                              <th>四星会员</th>
                              <th>五星会员</th>
                              <th>白金会员</th>
                              <th>钻石会员</th>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">抵用特权</th>
                              <td>1倍</td>
                              <td>1倍</td>
                              <td>1倍</td>
                              <td>1倍</td>
                              <td>1.5倍</td>
                              <td>2倍</td>
                              <td>2倍</td>
                              <td>2倍</td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">预订奖励</th>
                              <td>1倍</td>
                              <td>1倍</td>
                              <td>1倍</td>
                              <td>1倍</td>
                              <td>1倍</td>
                              <td>1.5倍</td>
                              <td>2倍</td>
                              <td>2倍</td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">签到特权</th>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">活动尊享</th>
                              <td></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">生日关怀</th>
                              <td></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">专属顾问</th>
                              <td></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">牛到家</th>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">wifi特权</th>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">贵宾通道</th>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">发票免快递费</th>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">免担保特权</th>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">送机特权</th>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                           <tr>
                              <th class="modu_level_tit">贵宾室特权</th>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td class="modu_level_yes"></td>
                              <td class="modu_level_yes"></td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <span class="typespan">等级规则</span>
                  <div class="biaoge2">
                     <table class="group">
                        <tbody>
                           <tr>
                              <th rowspan="2" class="modu_level_tit" style="width: 80px">会员级别</th>
                              <th rowspan="2" width="15%">级别标准</th>
                              <th width="30%">升降级标准</th>
                              <th class="modu_level_tit" width="40%">星级有效期延长的条件</th>
                           </tr>
                           <tr>
                              <td>1、二星以上会员的星级有效期为1年，自完成升星之日
                                 算起；注册及一星会员的星级有效期长期有效
                                 2、当星级到期时，将扣除二星及以上会员不同数量的成
                                 长值，并根据剩余成长值重新计算会员星级
                                 3、若达到上一级别的级别标准，即可升级。若未达到，
                                 则根据星级有效期延长的条件判断
                                 说明：扣除成长值时，会员的成长值最低为0
                              </td>
                              <td>当会员星级到期后，未能达到升级标准，
                                 1、只要符合以下条件，您的当前会员级别可以顺延一年
                                 2、若未能达到以下条件，将顺次下调一个会员级别，同时按照下调日更新会员星级有效期
                              </td>
                           </tr>
                           <tr>
                              <td>注册会员</td>
                              <td>注册但无消费记录</td>
                              <td colspan="2" style="text-align: center">永久有效</td>
                           </tr>
                           <tr>
                              <td>一星会员</td>
                              <td>成长值在1-1999，并有出游归来订单（指途牛旅游产品订单）</td>
                              <td colspan="2" style="text-align: center">永久有效</td>
                           </tr>
                           <tr>
                              <td>二星会员</td>
                              <td>成长值2000—6999</td>
                              <td>有效期1年，到期后扣除<span style="color: red">1000</span>成长值，根据剩余成长值重新计算会员星级。</td>
                              <td>在会员星级有效期内，签约未取消订单数≥<span
                                    style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span
                                    style="color: red">100元</span></td>
                           </tr>
                           <tr>
                              <td>三星会员</td>
                              <td>成长值7000—14999</td>
                              <td>有效期1年，到期后扣除<span style="color: red">1500</span>成长值，根据剩余成长值重新计算星级</td>
                              <td>在会员星级有效期内，签约未取消订单数≥<span
                                    style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span
                                    style="color: red">600元</span></td>
                           </tr>
                           <tr>
                              <td>四星会员</td>
                              <td>成长值15000—49999</td>
                              <td>有效期1年，到期后扣除<span style="color: red">3500</span>成长值，根据剩余成长值重新计算星级</td>
                              <td>在会员星级有效期内，签约未取消订单数≥<span
                                    style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span
                                    style="color: red">1500元</span></td>
                           </tr>
                           <tr>
                              <td>五星会员</td>
                              <td>成长值50000—99999</td>
                              <td>有效期1年，到期后扣除<span style="color: red">7000</span>成长值，根据剩余成长值重新计算星级</td>
                              <td>在会员星级有效期内，签约未取消订单数≥<span
                                    style="color: red">3单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span
                                    style="color: red">3000元</span></td>
                           </tr>
                           <tr>
                              <td>白金会员</td>
                              <td>成长值100000—299999</td>
                              <td>有效期1年，到期后扣除<span style="color: red">15000</span>成长值，根据剩余成长值重新计算星级</td>
                              <td>在会员星级有效期内，签约未取消订单数≥<span
                                    style="color: red">3单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span
                                    style="color: red">5000元</span></td>
                           </tr>
                           <tr>
                              <td>钻石会员</td>
                              <td>成长值300000+</td>
                              <td>有效期1年，到期后扣除<span style="color: red">50000</span>成长值，根据剩余成长值重新计算星级</td>
                              <td>在会员星级有效期内，签约未取消订单数≥<span
                                    style="color: red">4单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span
                                    style="color: red">8000元</span></td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>

         <!-- =============右侧 收藏================ -->
         <div class="right-container shoucang" style="display: none;">
            <div class="detail-title">
               <span>我的收藏</span>
            </div>
            <div class="focus-list">
               <div class="title">
                  <div class="title_1 del-batch-btn" @click="deleteCheckedCollection()">删除选中</div>
                  <div class="title_2">产品信息</div>
                  <div class="title_3">价格</div>
                  <div class="title_4">操作</div>
               </div>
               <div class="detail" v-for="(collection,i) in collectionArr" :key="i">
                  <div class="title_1" style="width: 6%;">

                     <input type="checkbox" name="productInfo" v-model="collection.isChecked" class="choose-btn">
                  </div>
                  <div class="title_2" style="width: 64%;">
                     <a href="javascript:void(0)" @click="goToHotelDetail(collection.hotelId)">
                        <img :src="collection.hotelImg">
                     </a>
                     <p class="focus-name">
                        <a href="javascript:void(0)" @click="goToHotelDetail(collection.hotelId)">{{collection.hotelName}}</a>
                     </p>
                     <p class="tour-type" @click="goToHotelDetail(collection.hotelId)">
                        <!-- <span>豪华型</span> -->
                        <img src="img/canting.png">
                        <img src="img/reshui.png">
                        <img src="img/wifi.png">
                        <img src="img/youyong.png">
                        <img src="img/jianshen.png">
                     </p>
                     <p class="comment-info">
                        <!-- <span>新品上线</span> -->
                     </p>
                  </div>
                  <div class="title_3">
                     <p><span>以实价为准</span></p>
                  </div>
                  <div class="title_4">
                     <a href="javascript:void(0)" class="order-btn" @click="goToHotelDetail(collection.hotelId)">预订</a>
                     <p class="del-btn" @click="deleteCollection(collection.collectionId)">删除</p>
                  </div>
               </div>
               <!-- <div class="detail">
                           <div class="title_1" style="width: 6%;">
                              <input type="checkbox" name="productInfo" class="choose-btn">
                           </div>
                           <div class="title_2" style="width: 64%;">
                              <a href="">
                                 <img src="img/niyigeluo.jpg">
                              </a>
                              <p class="focus-name">
                                 <a href="">苏州尼依格罗酒店</a>
                              </p>
                              <p class="tour-type">
                                 <span>豪华型</span>
                                 <img src="img/canting.png">
                                 <img src="img/reshui.png">
                                 <img src="img/wifi.png">
                                 <img src="img/youyong.png">
                                 <img src="img/jianshen.png">
                              </p>
                              <p class="comment-info">
                                 <span>新品上线</span>
                              </p>
                           </div>
                           <div class="title_3">
                              <p><span>以实价为准</span></p>
                           </div>
                           <div class="title_4">
                              <a href="" class="order-btn">预订</a>
                              <p class="del-btn">删除</p>
                           </div>
                        </div> -->
            </div>
         </div>

         <!-- =============右侧 优惠券================= -->
         <div class="right-container coupon-container" style="display: none;">
            <div class="coupon_header">
               <img src="img/bell.png" class="bell">
               <div class="coupon_info">
                  可用优惠券<span class="coupon_num">{{notUseCount}}</span>张
               </div>
            </div>

            <div class="coupon_floor">
               <div class="coupon_ul_div">
                  <ul class="coupon-ul">
                     <li class="coupon_nouse coupon_li li_active" @click="changeCouponNotUsed()">
                        <span class="coupon_span">未使用(<span>{{notUseCount}}</span>)</span>
                     </li>
                     <li class="coupon_uesed coupon_li" @click="changeCouponHaveUsed()">
                        <span class="coupon_span">已使用/过期(<span>{{haveUseCount}}</span>)</span>
                     </li>
                  </ul>
               </div>

               <div class="coupon_content">
                  <div class="not_used">
                     <ul id="coupon_list">
                        <li v-for="coupon in notUseCoupon">
                           <div class="coupon_detail">
                              <div class="coupon_type">
                                 {{coupon.couponName}}
                              </div>
                              <div class="coupon_price_time">
                                 <span class="price_and_discount" v-if="coupon.couponName=='折扣券'">
                                    {{coupon.couponDiscount}}折
                                 </span>
                                 <span class="price_and_discount" v-if="coupon.couponName=='满减券'">
                                    满{{coupon.couponFullPrice}}减{{coupon.couponPrice}}元
                                 </span>
                                 <span class="time_begin">
                                    {{coupon.beginTime}}至
                                 </span>
                                 <span class="time_end">
                                    {{coupon.endTime}}
                                 </span>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <div class="guoqi_have_used" style="display:none;">
                     <ul id="coupon_list">
                        <li v-for="coupon in haveUsedCoupon">
                           <div class="coupon_detail">
                              <div class="coupon_type" id="coupon_type">
                                 {{coupon.couponName}}
                              </div>
                              <div class="coupon_price_time" id="coupon_price_time">
                                 <span class="price_and_discount" v-if="coupon.couponName=='折扣券'">
                                    {{coupon.couponDiscount}}
                                 </span>
                                 <span class="price_and_discount" v-if="coupon.couponName=='满减券'">
                                    满{{coupon.couponFullPrice}}减{{coupon.couponPrice}}元
                                 </span>
                                 <span class="time_begin">
                                    {{coupon.beginTime}}至
                                 </span>
                                 <span class="time_end">
                                    {{coupon.endTime}}
                                 </span>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>

         <!-- =============右侧 订单================= -->
         <div class="right-container order" style="display: none;">
            <div class="top">
               <ul id="order-tab">
                  <li class="focus" id="all-order"><i>全部订单</i></li>
                  <li class="" id="canceled"><i>已取消(<span class="waitPay">{{hasCancelCount}}</span>)</i></li>
                  <li class="" id="wait-pay"><i>待付款(<span class="waitPay">{{waitPayCount}}</span>)</i></li>
                  <li class="" id="wait-use"><i>待使用(<span class="waitUse">{{waitUseCount}}</span>)</i></li>
                  <li class="" id="wait-commit"><i>待评价(<span class="waitCommit">{{waitCommitCount}}</span>)</i></li>
               </ul>
            </div>
            <div id="order-choose">
               <span class="order-info">产品信息</span>
               <span class="order-list">
                  <select>
                     <option value="0" selected="selected">全部订单</option>
                  </select>
               </span>
               <span class="order-mount li1">数量</span>
               <span class="order-time li1">时间</span>
               <span class="order-price ">订单金额</span>
               <span class="order-statue ">状态</span>
               <span class="order-operate ">操作</span>
            </div>
            <div id="order-item-box">
               <div class="order-item-list" v-for="(order,i) in orderArr" name="orderxunhuan">
                  <div class="order-item" style="display: block;">
                     <div class="item-header">
                        <span class="item-time">下单时间: {{order.orderTime}}</span>
                        <span class="order-id">订单号: {{order.orderNo}}</span>
                     </div>
                     <div class="item-detail">
                        <div class="item-desc">
                           <img src="img/orderlogo.png" class="item-icon">
                           <p class="title">
                              <span>{{order.hotelName}}</span>
                              <span class="subtitle">{{order.roomType}}</span>
                           </p>
                        </div>
                        <div class="item-kind">酒店</div>
                        <div class="item-mount"><span>1</span>间</div>
                        <div class="item-time">
                           <p>{{order.checkInTime}}</p>
                        </div>
                        <div class="item-price">￥<span>{{order.orderPrice}}</span></div>

                        <div class="item-statue" v-if="order.orderStatus == '1'">
                           <p>待付款</p>
                           <p>
                              <img src="img/daifukuan.png">
                              <span class="daojishi">{{countTime(order.createTime)}}</span>
                           </p>
                           <p>
                              <a href="javascript:void(0)" @click="goToDetail(order.orderNo)">查看详情</a>
                           </p>
                        </div>
                        <div class="item-operate" v-if="order.orderStatus == '1'">
                           <a href="javascript:void(0)" class="btn deleteBtn"
                              @click="cancelOrder(order.orderId)">取消订单</a>
                           <a href="javascript:void(0)" class="payBtn">去付款</a>
                        </div>

                        <div class="item-statue" v-if="order.orderStatus == '0'">
                           <p>已取消</p>

                           <p>
                              <a href="javascript:void(0)" @click="goToDetail(order.orderNo)">查看详情</a>
                           </p>
                        </div>
                        <div class="item-operate" v-if="order.orderStatus == '0'">
                           <a href="javascript:void(0);" @click="deleteOrder(order.orderId)"
                              class="btn deleteBtn">删除</a>
                        </div>
                        <div class="item-statue" v-if="order.orderStatus == '2'">
                           <p>待使用</p>

                           <p>
                              <a href="javascript:void(0)" @click="goToDetail(order.orderNo)">查看详情</a>
                           </p>
                        </div>
                        <div class="item-operate" v-if="order.orderStatus == '2'">
                           <!-- <a href="javascript:void(0)" class="btn deleteBtn">删除</a> -->
                           <!-- <a href="javascript:void(0)" class="commentBtn">去评价</a> -->
                        </div>

                        <div class="item-statue" v-if="order.orderStatus == '3'">
                           <p>待评价</p>

                           <p>
                              <a href="javascript:void(0)" @click="goToDetail(order.orderNo)">查看详情</a>
                           </p>
                        </div>
                        <div class="item-operate" v-if="order.orderStatus == '3'">
                           <a href="javascript:void(0)" class="btn deleteBtn"
                              @click="deleteOrder(order.orderId)">删除</a>
                           <a href="javascript:void(0)" class="commentBtn" @click="goToComment(order.userId,order.hotelId,order.orderId)">去评价</a>
                        </div>
                     </div>
                  </div>

               </div>
            </div>

            <!-- 分页 -->
            <div class="block" v-if="orderArr.length>5">
               <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page.sync="currentPage1"
                 :page-size="pageSize"
                 layout="total, prev, pager, next"
                 :total="orderTotal">
               </el-pagination>
            </div>
      </div>
      </div>
      <template>
         <el-button plain @click="open2">右下角</el-button>
      </template>
   </div>
      <!--引入vue与element-ui-->
      <script src="../../js/untils/vue.js"></script>

      <!-- 引入组件库 -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script src="../../js/untils/axios-0.18.0.js"></script>
      <script>
         new Vue({
            el: "#app",
            data() {
               return {
                  nickname: "", // 昵称
                  phone: "", // 手机号
                  birthday: '', // 出生日期
                  sex: "", // 性别 m 男 w 女
                  email: "", // 邮箱
                  address: "", // 地址
                  educate: '', // 学历
                  work: "", // 职业
                  ismarraied: '', // 是否已婚
                  lastpwd: "", // 旧密码
                  password: "", // 密码
                  confirmPwd: "", // 确认密码

                  showErrMsg: false, // 是否展示错误提示消息
                  showTrueMsg: false, // 是否展示操作成功提示消息
                  msg: '', // 消息

                  marry: [{
                     id: '1',
                     ismarraied: '已婚'
                  }, {
                     id: '2',
                     ismarraied: '未婚'
                  }],

                  workArr: [{
                        id: "1",
                        work: "白领/一般职员",
                     },
                     {
                        id: "2",
                        work: "公务员/事业单位",
                     },
                     {
                        id: "3",
                        work: "工业/服务业人员",
                     },
                     {
                        id: "4",
                        work: "自由职业/个体户/私营业主",
                     },
                     {
                        id: "5",
                        work: "无业/失业/下岗",
                     },
                     {
                        id: "6",
                        work: "退休",
                     },
                     {
                        id: "7",
                        work: "学生",
                     }
                  ],

                  educateArr: [{
                        id: 1,
                        educate: "博士及以上",
                     },
                     {
                        id: 2,
                        educate: "硕士",
                     },
                     {
                        id: 3,
                        educate: "本科",
                     },
                     {
                        id: 4,
                        educate: "大专",
                     },
                     {
                        id: 5,
                        educate: "大专及以下",
                     }
                  ],
                  flag: true, // 是否切换修改密码样式
                  waitPayCount: "",
                  waitUseCount: "",
                  waitCommitCount: "",
                  hasCancelCount: "",
                  waitPayCount: 0,
                  waitUseCount: 0,
                  waitCommitCount: 0,
                  hasCancelCount: 0,
                  orderArr: "",
                  timer: "",
                  collectionArr: "",
                  notUseCoupon: "",
                  haveUsedCoupon: "",
                  notUseCount: "",
                  haveUseCount: "",
                  discountCount: "",
                  manjianCount: "",
                  // 用户信息
                  admin: {},
                  isLogin: false,
                  socket: "",
                  currentPage1: 1,
                  pageSize: 5, // 每页展示
                  orderTotal: 5, // 总记录数
                  pageOrderArr: "",
                  recommendList: "",
               }
            },

            // 方法
            methods: {
               // 切换样式
               selectBtn(event) {
                  console.log(event)
                  if (this.flag) {
                     this.flag = false;
                  } else {
                     this.flag = true
                  }
               },

               // 保存信息
               submitBtn() {
                  this.showErrMsg = true
                  // 非空验证
                  if (this.isEmpty(this.nickname)) {
                     this.msg = "昵称不能为空！"
                     return
                  }

                  if (this.isEmpty(this.phone)) {
                     this.msg = "号码不能为空！"
                     return
                  }

                  if (this.isEmpty(this.birthday)) {
                     this.msg = "出生日期不能不选！"
                     return
                  }

                  if (this.isEmpty(this.sex)) {
                     this.msg = "性别不能为空！"
                     return
                  }

                  if (this.isEmpty(this.email)) {
                     this.msg = "邮箱不能为空！"
                     return
                  }

                  if (this.isEmpty(this.address)) {
                     this.msg = "地址不能为空！"
                     return
                  }

                  if (this.isEmpty(this.marry)) {
                     this.msg = "婚姻不能为空！"
                     return
                  }

                  if (this.isEmpty(this.work)) {
                     this.msg = "职业不能为空！"
                     return
                  }

                  if (this.isEmpty(this.educate)) {
                     this.msg = "学历不能为空！"
                     return
                  }

                  // 正则验证
                  if ((/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/).test(this.nickname)) {
                     if ((/^[1][3,4,5,7,8,9][0-9]{9}$/).test(this.phone)) {
                        if ((/^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/).test(this.email)) {
                           this.showErrMsg = false;
                           this.showTrueMsg = true;
                           // 存储数据
                        } else {
                           this.msg = "邮箱格式有误！"
                           return
                        }
                     } else {
                        this.msg = "手机号码格式有误！"
                        return
                     }
                  } else {
                     this.msg = "昵称格式不正确！"
                     return
                  }
               },

               // 取消保存信息
               cancelBtn() {
                  this.showErrMsg = false;
                  this.showTrueMsg = false;
               },

               // 保存密码
               submitPwd() {
                  this.showErrMsg = true
                  if (this.isEmpty(this.password)) {
                     this.msg = "密码不能为空！"
                     return
                  }

                  if (this.isEmpty(this.confirmPwd)) {
                     this.msg = "确认密码不能为空！"
                     return
                  }

                  if (this.password.length < 6) {
                     this.msg = "密码长度不能小于6！"
                     return
                  }

                  if (this.confirmPwd.length < 6) {
                     this.msg = "确认密码长度不能小于6！"
                     return
                  }

                  if (this.password != this.lastpwd) {
                     if (this.password == this.confirmPwd) {
                        this.showErrMsg = false;
                        this.showTrueMsg = true;
                        // 存储新密码

                     } else {
                        this.msg = "确认密码与新密码不一致！"
                        return
                     }
                  } else {
                     this.msg = "密码不能与之前一样！"
                     return
                  }
               },

               // 取消保存密码
               cancelPwd() {
                  this.showErrMsg = false;
                  this.showTrueMsg = false;
               },

               // 判断是否为空
               isEmpty(str) {
                  if (str == null || str == '') return true;
                  return false;
               },

               close() {
                  this.showErrMsg = false
                  this.showTrueMsg = false
               },

               // 查询订单列表
               selectAllOrder() {
                  var that = this
                  axios({
                     method: "get",
                     url: "http://localhost:8080/customerOrder/getOrderList/" + that.admin.userId,
                  }).then(function (resp) {
                     console.log("success")
                     that.orderArr = resp.data.data
                     // console.log(that.orderArr)

                     that.countOrderStatus(that.orderArr)
                     console.log(that.orderArr)

                     // that.countOrderStatus(that.orderArr)
                  })
               },
               // 查询所有收藏
               selectAllCollection() {
                  var that = this
                  axios({
                     method: "get",
                     url: "http://localhost:8080/getCollectionList/" + that.admin.userId,
                  }).then(function (resp) {
                     // console.log("success")
                     // that.collectionArr = JSON.stringify(resp.data.data)
                     var array = resp.data.data
                     for (let i = 0; i < array.length; i++) {
                        array[i].isChecked = false
                     }
                     that.collectionArr = array
                     // console.log("收藏==="+JSON.stringify(that.collectionArr))
                  })
               },

               // 删除订单
               deleteOrder(orderId) {
                  var that = this
                  var result = window.confirm("确定删除本条记录么?");
                  var url = "http://localhost:8080/customerOrder/deleteOrder/" + orderId;
                  if (result) {
                     axios({
                        method: "put",
                        url: url
                     }).then(function (resp) {
                        alert("删除成功")
                        // console.log(resp)
                        if (resp.data.code == 200) {
                           that.selectAllOrder()
                        }
                     })
                  }
               },
               cancelOrder(orderId) {
                  var that = this
                  var result = window.confirm("确定取消订单么?");
                  var url = "http://localhost:8080/customerOrder/cancelOrder/" + orderId;
                  if (result) {
                     axios({
                        method: "put",
                        url: url
                     }).then(function (resp) {
                        alert("取消成功")
                        // console.log(resp)
                        if (resp.data.code == 200) {
                           that.selectAllOrder()
                        }
                     })
                  }
               },

               // 统计订单状态
               countOrderStatus(arr) {
                  var that = this
                  var hasCancelCount = 0
                  var waitPayCount = 0
                  var waitUseCount = 0
                  var waitCommitCount = 0
                  // console.log(arr)
                  for (let i = 0; i < arr.length; i++) {
                     var order = arr[i];
                     // console.log(order)
                     if (order.orderStatus == 0)
                        hasCancelCount++
                     if (order.orderStatus == 1)
                        waitPayCount++
                     if (order.orderStatus == 2)
                        waitUseCount++
                     if (order.orderStatus == 3)
                        waitCommitCount++

                  }
                  // console.log("待付款"+waitPayCount)
                  that.hasCancelCount = hasCancelCount
                  that.waitPayCount = waitPayCount
                  that.waitCommitCount = waitCommitCount
                  that.waitUseCount = waitUseCount
               },

               // 跳转详情页面
               goToDetail(num) {
                  var that = this
                  var result = null
                  // debugger
                  for (let i = 0; i < that.orderArr.length; i++) {
                     let order = that.orderArr[i];
                     if (order.orderNo == num) {
                        result = order
                        // result = JSON.stringify(order)
                        // console.log("result"+JSON.stringify(result))
                        break
                     }
                  }
                  if (result != null) {
                     localStorage.setItem("result", JSON.stringify(result))
                     // console.log(JSON.parse(localStorage.getItem("result")))
                     window.location.href = "order_details.html?phone="+that.admin.userPhone
                  } else {
                     alert("订单不存在")
                  }
               },
               //订单倒计时
               countTime(createTime) {
                  var that = this
                  //获取当前时间 

                  var date = new Date();
                  var now = date.getTime();
                  var endTime = new Date(createTime).getTime() + (1000 * 60 * 20) //截至的时间戳
                  // var nn=timestampToTime(parseInt(nTime));//之间的时间戳+当前的时间
                  // console.log(endTime)
                  var now = date.getTime();
                  // //时间差  
                  var leftTime = endTime - now;
                  // //定义变量 d,h,m,s保存倒计时的时间  
                  var d, h, m, s;
                  if (leftTime >= 0) {
                     m = Math.floor(leftTime / 1000 / 60 % 60);
                     s = Math.floor(leftTime / 1000);
                     if (m >= 10)
                        return "00:" + m
                     else {
                        return "00:0" + m
                     }
                  } else {
                     return "00:00"
                  }
                  // setTimeout(that.countTime(createTime),10000);
                  setTimeout(function () {
                     that.countTime(createTime)
                  }, 60000)
               },
               //删除收藏
               deleteCollection(collectionId) {
                  var that = this
                  var result = window.confirm("确定删除本条收藏么?");
                  var url = "http://localhost:8080/collection/deleteCollection/" + collectionId;
                  if (result) {
                     axios({
                        method: "put",
                        url: url
                     }).then(function (resp) {
                        alert("删除成功")
                        // console.log(resp)
                        if (resp.data.code == 200) {
                           that.selectAllCollection()
                        }
                     })
                  }
               },
               //删除选中收藏
               deleteCheckedCollection() {
                  var that = this
                  var returnCollArr = [];
                  for (let i = 0; i < that.collectionArr.length; i++) {
                     let collect = that.collectionArr[i];
                     if (collect.isChecked) {
                        returnCollArr.push(collect)
                     }
                  }
                  // console.log(returnCollArr)
                  var result
                  if (returnCollArr.length > 0) {
                     result = window.confirm("确定删除所选收藏么?");
                  } else {
                     alert("请选中需要删除的收藏")
                  }
                  var url = "http://localhost:8080/collection/deleteCheckedCollection";
                  if (result) {
                     axios({
                        method: "put",
                        url: url,
                        data: returnCollArr
                     }).then(function (resp) {
                        alert("删除成功")
                        // console.log(resp)
                        if (resp.data.code == 200) {
                           that.selectAllCollection()
                        }
                     })
                  }
               },
               //优惠券状态更改
               changeCouponNotUsed() {
                  $(".not_used").css("display", "block")
                  $(".guoqi_have_used").css("display", "none")
               },
               changeCouponHaveUsed() {
                  $(".not_used").css("display", "none")
                  $(".guoqi_have_used").css("display", "block")
               },
               //获取所有优惠券
               getNotUseCouponList() {
                  var that = this
                  var url = "http://localhost:8080/customerUserCoupon/notUseCouponList/" + that.admin.userId;
                  axios({
                     method: "get",
                     url: url
                  }).then(function (resp) {
                     that.notUseCoupon = resp.data.data;
                     // console.log(that.notUseCoupon)
                     that.countCoupon()
                  })
               },
               getHaveUsedCouponList() {
                  var that = this
                  var url = "http://localhost:8080/customerUserCoupon/haveUsedCouponList/" + that.admin.userId;
                  axios({
                     method: "get",
                     url: url
                  }).then(function (resp) {
                     that.haveUsedCoupon = resp.data.data;
                     // console.log(that.haveUsedCoupon)
                     that.countCoupon()
                  })

            },
               countCoupon(){
                  var that=this
                  that.notUseCount = that.notUseCoupon.length
                  that.haveUseCount = that.haveUsedCoupon.length
                  var discount= 0
                  var manjian= 0;
                  for (let i = 0; i < that.notUseCoupon.length; i++) {
                     let coupon = that.notUseCoupon[i];
                     if(coupon.couponName=="折扣券")
                        discount++;
                     else
                        manjian++;
                  }
                  that.discountCount = discount
                  that.manjianCount = manjian
               },
               goToComment(userId,hotelId,orderId){
                  window.location.href = "../comment/extend-menu.html"+"?userId="+userId+"-"+hotelId+"-"+orderId+"-"+this.admin.userPhone
               },
               init() {
                    if (typeof (WebSocket) === "undefined") alert("您的浏览器不支持websocket")
                    else {
                        // debugger
                        //模拟产生clientID
                        let clientID = Math.ceil(Math.random() * 100);
                        // 实例化socket
                        this.socket = new WebSocket("ws://localhost:8080/testWebSocket/" + this.admin.userId)
                        // this.socket = new WebSocket("ws://192.168.186.242:8084/testWebSocket/" + clientID)

                        // 监听socket连接
                        this.socket.onopen = this.open
                        // 监听socket错误信息
                        this.socket.onerror = this.error
                        // 监听socket消息
                        this.socket.onmessage = this.getMessage
                        
                    }
                },

                open: function () {
                    console.log("socket连接成功")
                },
                error: function () {
                    console.log("连接错误")
                },
                getMessage: function (msg) {
                    console.log(msg.data)
                    this.socket=msg.data
                    this.open2()
                },
                send: function () {
                    this.socket.send(params)
                },
                close: function () {
                    console.log("socket已经关闭")
                },
                open2() {
                  this.$notify({
                     title: '您有一条消息',
                     message: this.socket,
                     position: 'bottom-right'
                  });
               },


               // 跳转到客服页面
               skipToCustomerServer() {
                  var that = this
                  if (that.admin != null) window.location.href =
                     "../../html/coupon/customer_service/chatting.html?userAdmin=" + that.admin.standby01
                  else window.location.href = "../../html/coupon/customer_service/chatting.html"

               },

               // 退出登录
               signOut() {
                  // 清空缓存
                  window.localStorage.clear()
                  // 清空用户信息
                  this.admin = {}
                  this.isLogin = false
                  // 跳转到登录页面
                  // window.location.href = "../admin/admin.html"
               },

               // 跳转到首页
               skipToIndex() {
                  var that = this
                  if (that.admin != null) window.location.href =
                     "../index/index.html?phone=" + that.admin.userPhone
                  else window.location.href =
                     "../index/index.html"
               },

               // 根据userId获取用户信息
               getUserInfoByUserId() {
                  var that = this
                  axios({
                     method: 'get',
                     url: 'http://localhost:8080/customerUser/getUserInfoByUserId' + "?userId=" + that.admin.userId
                  }).then(function (resp) {
                     // console.log("数据库-----------")
                     // console.log(resp.data.data)
                     that.admin = resp.data.data
                     // console.log(that.admin)
                  })
               },

               //分页
               handleSizeChange(val) {
                  // console.log(`每页 ${val} 条`);
                  var that = this //异步请求
                  that.pageSize = val //当前的页码容量
                  // console.log(that.pageSize)
                  that.getBypage() // 调用分页查询
                  // console.log(that.getBypage())
               },
               handleCurrentChange(val) {
                  // console.log(`当前页: ${val}`);
                  // var that = this
                  this.currentPage = val //当前页
                  // console.log(this.currentPage)
                  this.getBypage() // 调用分页查询
               },
               // 分页查询
               getBypage() {
                  var that = this //异步请求
                  // console.log("当前页 ：" +that.currentPage + "  " + "当前页数的容量 ：" +that.pageSize )
                  axios({
                     method: 'get', //请求方式
                     url: 'http://localhost:8080/customerOrder/selectByPage/' + that.admin.userId + "/" +that.currentPage1 + "/" + that.pageSize, //请求路径
                  }).then(function (resp) {
                     // console.log(resp.data.data.records)
                     // that.tableData = resp.data.data.records
                     that.orderTotal = resp.data.data.total //总的记录数
                     var arr = resp.data.data.records //接收到的数据
                     that.pageOrderArr = arr //赋值给前端接收优惠券的数组
                     that.countOrderStatus(that.pageOrderArr)
                  })
               },
               getRecommend() {
                  var that = this
                  axios({
                     method: 'get',
                     url: 'http://localhost:8080/recommendHotelByUserId?userId=' + that.admin.userId +'&howMany='+4,
                  }).then(function (resp) {
                     // console.log("推荐:" + JSON.stringify(resp.data.data))
                     that.recommendList = resp.data.data
                  })
               },
               goToHotelDetail(hotelId){
                  window.location.href="../screen/details/details.html?phone="+this.admin.userPhone+"&hotelId="+hotelId;
               }
            },
            // 钩子函数
            created() {
               var that = this

            },

            // 一般在初始化页面完成后,再对dom节点进行相关操作
            mounted() {
               // 取出缓存中的用户数据
               let that = this
               var url = decodeURI(window.location.href);
               // console.log("路径" + url)
               var userId = url.split("?userId=")[1]
               // console.log("用户账号:" + userId)
               this.admin.userId = userId
               // console.log("缓存---------")
               // console.log(this.admin)
               if (that.admin != null) {
                  this.isLogin = true
               } else this.isLogin = false
               // 查询所有
               // that.selectAllOrder()
               // that.selectAllCollection()
               // that.getNotUseCouponList()
               // that.getHaveUsedCouponList()
               // that.countCoupon()
               // that.init()
               // that.getUserInfoByUserId()
               //  console.log("socket:"+JSON.stringify(that.socket))
               that.selectAllOrder()
               that.selectAllCollection()
               that.getNotUseCouponList()
               that.getHaveUsedCouponList()
               that.countCoupon()
               that.init()
               that.getUserInfoByUserId()
               that.getBypage()
               that.getRecommend()
               // 取出缓存中的用户数据
               var url = decodeURI(window.location.href);
               // console.log("路径" + url)
               var userId = url.split("?userId=")[1]
               // console.log("用户账号:" + userId)
               this.admin.userId = userId
               // console.log(this.admin)
            }
         })
      </script>   
   
   <script src="js/center_index.js"></script>

</body>

</html>